<script setup lang='ts'>
  import { onMounted, reactive, watch, ref } from 'vue';
  import { contentApi } from '@/api/controller';
  import { ToastSuccess, Toastloading } from '@/utils/public';
  import { ElMessageBox } from 'element-plus';
  import { useRoute } from 'vue-router';
  import xmImage from '@/components/xmImage/index.vue'
  import bannerForm from './components/bannerForm.vue'
  import Pagination from "@/components/Pagination/index.vue";
  const formRef = ref();
  const $route = useRoute()
  const action = reactive({
    total:0,
    list:[] as any[],
  })
  const listQuery = reactive({
    page: 1,
    limit: 20,
    type:-1 as number,
  })
  const typeOptions = [
    { label: '全部', value: -1 },
    { label: 'Banner', value: 0 },
    { label: '开屏', value: 1 },
    { label: '插屏', value: 2 },
    { label: '房间内', value: 3 },
    { label: '关注条', value: 4 },
    { label: '小屋', value: 5 },
    { label: '今日精彩', value: 6 },
    { label: '公会banner', value: 7 },
    { label: '活动推荐', value: 10 },
    { label: '个播banner', value: 11 },
    { label: '匹配', value: 12 },
    { label: '关注条-小屋', value: 13 },
    { label: '房间推荐', value: 14 },
  ]
  const userCatArr = [
    {label:'全部',value:0},
    {label:'主播',value:1},
    {label:'用户',value:2}
  ]
  const handelOpenForm = (row:any = {})=>{
    formRef.value.openDialog({
      ...row,
      type:listQuery.type
    })
  }
  const handleDelete = (row:any = {})=>{
    ElMessageBox.confirm("确定执行此操作吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(async () => {
      const loading = Toastloading();
      await contentApi.deleteBanner({
        id:row.id
      });
      loading.close();
      ToastSuccess("操作成功!");
      getList();
    })
    .catch(() => {});
  }
  const getList = async()=> {
    const loading = Toastloading()
    const res = await contentApi.getBanners(listQuery)
    loading.close()
    const { data=[], total=0 } = res.data
    action.list = data
    action.total = total
  }
  const getRouteMetaType = ()=>{
    listQuery.type = $route.meta.type as number
    getList()
  }
  watch($route,(res:any)=>{
    if(res.meta.type > -1) {
      getRouteMetaType()
    }
  })
  onMounted(()=>{
    getRouteMetaType()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <el-button v-rule="'banner_store'" type="primary" @click="handelOpenForm()">新增</el-button>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border>
      <el-table-column width="120" prop="id" label="ID" />
      <el-table-column width="120" sortable prop="sort" label="广告顺序" />
      <el-table-column width="180" show-overflow-tooltip prop="name" label="名称" />
      <el-table-column width="180" align="center" prop="img" label="图片">
        <template #default="scope">
          <xmImage class="bannerImg" :src="scope.row.img" :list="[scope.row.img]" />
        </template>
      </el-table-column>
      <el-table-column width="180" show-overflow-tooltip prop="action" label="链接" />
      <el-table-column width="120" prop="status" label="显示状态">
        <template #default="scope">
          <el-icon size="28">
            <SuccessFilled color="#67C23A" v-if="scope.row.status == 0" />
            <CircleCloseFilled v-if="scope.row.status == 1" />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column v-if="listQuery.type == 3" width="120" prop="room_ids" label="房间ID" />
      <el-table-column width="120" sortable prop="mincharm" label="最小魅力值" />
      <el-table-column width="120" sortable prop="maxcharm" label="最大魅力值" />
      <el-table-column width="120" sortable prop="minrich" label="最小财富值" />
      <el-table-column width="120"  prop="maxrich" label="最大财富值" />
      <el-table-column width="120" sortable prop="minmoney" label="最小充值钻石" />
      <el-table-column width="140" sortable prop="maxmoney" label="最大充值钻石" />
      <el-table-column width="120" prop="auto_time" label="自动跳过时间" />
      <el-table-column width="120" prop="type" label="广告位置">
        <template #default="scope">
          <template v-for="item in typeOptions">
            <span v-if="scope.row.type == item.value">{{item.label}}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column width="180" prop="start_timestamp" label="开始时间" />
      <el-table-column width="180" prop="end_timestamp" label="结束时间" />
      <el-table-column fixed="right" width="180" align="center" label="操作">
        <template #default="scope">
          <el-button v-rule="'banner_update'" type="primary" @click="handelOpenForm(scope.row)">编辑</el-button>
          <el-button v-rule="'banner_destroy'" v-if="scope.row.status!='deleted'" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <bannerForm ref="formRef" @updateList="getList" :userCatArr="userCatArr" />
  </div>
</template>

<style lang='scss' scoped>

  .bannerImg {
    width: auto;
    height: 100px;
  }
</style>